<template>
	<div class="fan-sweep-form">
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="40%" size="small">
			<el-form-item label="时间间隔(秒)" prop="scanWaitTime">
				<el-input-number v-model="dataForm.scanWaitTime" :step="1" :min="0" :max="999999" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="步距角" prop="scanStepAngle">
				<el-input-number v-model="dataForm.scanStepAngle" :step="0.1" :min="0" :max="90" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="转台速度" prop="ptzSpeed">
				<el-input-number v-model="dataForm.ptzSpeed" :step="1" :min="0" :max="90" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="水平左边界" prop="scanLeft">
				<el-input-number v-model="dataForm.scanLeft" :step="0.1" :min="0" :max="360" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="水平右边界" prop="scanRight">
				<el-input-number v-model="dataForm.scanRight" :step="0.1" :min="0" :max="360" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="俯仰上边界" prop="scanUp">
				<el-input-number v-model="dataForm.scanUp" :step="0.1" :min="0" :max="360" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="俯仰下边界" prop="scanDown">
				<el-input-number v-model="dataForm.scanDown" :step="0.1" :min="0" :max="360" placeholder="请输入"></el-input-number>
			</el-form-item>
			<el-form-item label="" label-width="0">
				<div style="margin: auto; text-align: center">
					<el-button type="primary" @click="saveHandle">保存</el-button>
					<el-button type="primary" @click="runHandle(0)">开始</el-button>
					<el-button type="primary" @click="runHandle(2)">暂停</el-button>
					<el-button type="danger" @click="runHandle(1)">停止</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { assign, keys, pick } from 'lodash'
import { reactive, ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useGetTurnScanApi, useSaveTurnScanApi, useRunTurnScanApi } from '@/api/settingModule'

const props = defineProps({
	options: {
		type: Object,
		default() {}
	}
})

const dataFormRef = ref()
const dataForm = reactive({
	channelId: '', // 设备id
	ptzSpeed: 0, // 云台等级速度 0~90
	scanStepAngle: 0.0, // 步距角（度） 0~90
	scanUp: 0.0, // 0--360,帧扫上边界
	scanDown: 0.0, // 0--360,帧扫下边界
	scanLeft: 0.0, // 0--360,帧扫左边界
	scanRight: 0.0, // 0--360,帧扫右边界
	scanWaitTime: 0 // 停留时间 豪秒
})

const dataRules = ref({
	ptzSpeed: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scanStepAngle: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scanUp: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scanDown: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scanLeft: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scanRight: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
	scanWaitTime: [{ required: true, message: '必填项不能为空', trigger: 'blur' }]
})

const getDetail = async () => {
	const { data } = await useGetTurnScanApi({ channelId: props.options.channelId })
	assign(dataForm, pick(data, keys(dataForm)))
}

// watch(
// 	() => props.options.channelNum,
// 	next => {
// 		getDetail()
// 	},
// 	{
// 		deep: true
// 	}
// )

onMounted(() => {
	getDetail()
})

// 保存
const saveHandle = () => {
	dataForm.channelId = props.options.channelId

	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}

		useSaveTurnScanApi(dataForm).then(() => {
			ElMessage.success({
				message: '保存成功',
				duration: 1000,
				onClose: () => {}
			})
		})
	})
}

// 运行 0=开始,1=结束,2=暂停,3=继续
const runHandle = (type: number) => {
	useRunTurnScanApi({
		channelId: props.options.channelId,
		type: type
	}).then(() => {
		let message = ''

		switch (type) {
			case 0:
				message = '开始运行'
				break
			case 1:
				message = '结束运行'
				break
			case 2:
				message = '暂停运行'
				break
			case 3:
				message = '继续运行'
				break
			default:
				break
		}

		ElMessage.success({
			message: message,
			duration: 1000,
			onClose: () => {}
		})
	})
}
</script>

<style lang="scss" scoped></style>
